<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>

<c:url value="/records.html" var="recordsUrl"/>
<c:url value="/create.html" var="addUrl"/>
<c:url value="/update.html" var="editUrl"/>
<c:url value="/delete.html" var="deleteUrl"/>

<html>
<head>
	<link rel="stylesheet" href="css/stylekram.css" type="text/css" />
	<link rel="stylesheet" href="css/customkram.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.6.js"></script>
	<script type="text/javascript" src="js/customkram.js"></script>
	<script type="text/javascript" src="js/validation.js"></script>

	<title>Employees</title>
	
	<script type='text/javascript'>
	$(function() {
		// init
		urlHolder.records = '${recordsUrl}';
		urlHolder.add = '${addUrl}';
		urlHolder.edit = '${editUrl}';
		urlHolder.del = '${deleteUrl}';
		loadTable();
		
		$('#newBtn').click(function() { 
			toggleForms('new');
			toggleCrudButtons('hide');
		});
		
		$('#editBtn').click(function() { 
			if (hasSelected()) {
				toggleForms('edit');
				toggleCrudButtons('hide');
				fillEditForm();
			}
		});
		
		$('#reloadBtn').click(function() { 
			loadTable();
		});

		$('#deleteBtn').click(function() {
			if (hasSelected()) { 
				submitDeleteRecord();
			}
		});
		
		$('#newForm').submit(function() {
			event.preventDefault();
			if(newformValidatorE()){
				submitNewRecord();	
			}
		});
		
		$('#editForm').submit(function() {
			event.preventDefault();
			if(editformValidatorE()){
			submitUpdateRecord();
			}
		});

		$('#closeNewForm').click(function() { 
			toggleForms('hide'); 
			toggleCrudButtons('show');
		});
		
		$('#closeEditForm').click(function() { 
			toggleForms('hide'); 
			toggleCrudButtons('show');
		});
	});
	</script>
</head>

<body>
	
	<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
		<a class="ui-jqgrid-titlebar-close HeaderButton" href="javascript:void(0)" role="link" style="right: 0px;">
		<span class="ui-icon ui-icon-circle-triangle-n"></span>
		</a>
	<span class="ui-jqgrid-title">Employee System</span>
</div>
	
	
	<table id='tableUsers'>
		<caption></caption>
		<thead>
			<tr>
				<th></th>
				<th>Employee ID</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Role</th>
			</tr>
		</thead>
	</table>
	
	<div id='controlBar'>
		<input type='button' value='New' id='newBtn' />
		<input type='button' value='Delete' id='deleteBtn' />
		<input type='button' value='Edit' id='editBtn' />
		<input type='button' value='Reload' id='reloadBtn' />
		<a href="">Graph</a>
	</div>
	
	<div id='newForm'>
		<form action="" name="newform" id="newform">
  			<fieldset>
				<legend>Add Employee</legend>
				<label for='newUsername'>EmployeeId</label><input type='text' id='newUsername'/><br/>
				<label for='newPassword'>Password</label><input type='password' id='newPassword'/><br/>
				<label for='newFirstName'>First Name</label><input type='text' id='newFirstName'/><br/>
				<label for='newLastName'>Last Name</label><input type='text' id='newLastName'/><br/>
				<label for='newRole'>Role</label>
					<select id='newRole'>
						<option value='1'>Trainee</option>
						<option value='2'>Junior Engineer</option>
						<option value='3'>Software Engineer</option>
						<option value='4'>Sr. Software Engineer</option>
						<option value='5'>Lead</option>
						<option value='6'>Sr. Lead</option>
						<option value='7'>Technical Specialist</option>
						<option value='8'>Architect</option>
						<option value='9'>Manager</option>
						<option value='10'>Sr. Manager</option>
					</select>
						<input type='hidden' id='newProject' value="11"/>	
						<input type='hidden' id='newTraining' value="21"/>
  			</fieldset>
			<input type='button' value='Close' id='closeNewForm' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
	<div id='editForm'>
		<form action="" name="editform" id="editform">
  			<fieldset>
				<legend>Edit</legend>
				<input type='hidden' id='editUsername'/>
				<label for='editFirstName'>First Name</label><input type='text' id='editFirstName'/><br/>
				<label for='editLastName'>Last Name</label><input type='text' id='editLastName'/><br/>
				<label for='editRole'>Role</label>
					<select id='editRole'>
					<option value='1'>Trainee</option>
						<option value='2'>Junior Engineer</option>
						<option value='3'>Software Engineer</option>
						<option value='4'>Sr. Software Engineer</option>
						<option value='5'>Lead</option>
						<option value='6'>Sr. Lead</option>
						<option value='7'>Technical Specialist</option>
						<option value='8'>Architect</option>
						<option value='9'>Manager</option>
						<option value='10'>Sr. Manager</option>
					</select>
						<input type='hidden' id='editProject' value="11"/>	
						<input type='hidden' id='editTraining' value="21"/>	
			</fieldset>
			<input type='button' value='Close' id='closeEditForm' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
</body>
</html>